<template>
  <div id="app">
    <el-container style="height:100%;">
      <el-header>
        <a href="#">Kindle Clipper</a>
        <div style="height:100%;float:right">
          <el-button v-if="logged" type="danger" round>登 录</el-button>
          <el-button v-if="logged" type="success" round>注 册</el-button>
          <el-link style="font-size:18px;margin-right:10px;" v-if="!logged" type="info">
            sidepeng
            <i class="el-icon-view"></i>
          </el-link>
          <el-button v-if="!logged" type="warning" round>退 出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px" style="padding:10px;">
          <el-button type="danger" round style="margin-top:10px;">导 入</el-button>
          <el-divider></el-divider>
          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-aside>
        <el-container>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      logged: false,
      treeData: [
        {
          label: "所有图书",
          children: [
            {
              label: "所有分类",
              children: [
                {
                  label: "测试书籍"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      window.console.log(data);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.el-header {
  background-color: #f7f7f7;
  color: #333;
  line-height: 60px;
  height: 60px;
  border-bottom: 1px solid #d8d8d8;
}

.el-aside {
  color: #333;
  border-right: 1px solid #d8d8d8;
}

.el-main {
  color: #333;
  border-left: 1px solid #d8d8d8;
  margin-left: 20px;
}
#app {
  position: absolute;
  border: 1px solid #d8d8d8;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}
</style>
